<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>房源后台管理</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/admin_myLayui.css">
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo"><img alt="" src="imgs/logo_02.png"></div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台</a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item"><a href="javascript:;">其它系统</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">邮件管理</a>
						</dd>
						<dd>
							<a href="">消息管理</a>
						</dd>
						<dd>
							<a href="">授权管理</a>
						</dd>
					</dl></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"><%=request.getSession().getAttribute("username") %>
				</a>
				</li>
				<li class="layui-nav-item"><a href="hs.do?op=removesession">退了</a></li>
			</ul>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item "><a class=""
						href="javascript:;">用户信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="admin_users.jsp">用户列表</a>
							</dd>
							<dd>
								<a href="useradd.jsp">添加用户</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">公寓信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="admin_house.jsp">房屋列表</a>
							</dd>
							<dd>
								<a href="houseadd.jsp">添加房屋信息</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">缴纳信息</a>
					  <dl class="layui-nav-child">
							<dd>
								<a href="admin_prices.jsp">缴纳列表</a>
							</dd>
							<dd>
								<a href="priceadd.jsp">添加缴纳信息</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">房源信息</a>
					  <dl class="layui-nav-child">
							<dd class="layui-this">
								<a href="admin_housing.jsp">房源列表</a>
							</dd>
							<dd>
								<a href="housingadd.jsp">添加房源信息</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="fix.jsp">故障内容</a></li>
					<li class="layui-nav-item"><a href="admin_forum.jsp">社区评论</a></li>
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">

				<div class="demoTable">
					搜索ID：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off" placeholder="搜索公寓名称...">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>

				<script type="text/html" id="toolbarDemo">
                       <div class="layui-btn-container">
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                             <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                       </div>
                </script>

				<script type="text/html" id="barDemo">
                     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                </script>


				<script src="layui/layui.js" charset="utf-8"></script>
				<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

				<script>
					layui.use([ 'table', 'form' ], function() {
						var table = layui.table;

						table.render({
							elem : '#test',
							url : 'hs.do',
							toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
							,
							defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
								title : '提示',
								layEvent : 'LAYTABLE_TIPS',
								icon : 'layui-icon-tips'
							} ],
							title : '用户数据表',
							cols : [ [
									{
										type : 'checkbox',
										fixed : 'left'
									},
									{
										field : 'hsId',
										title : '编号',
										width : 80,
										fixed : 'left',
										unresize : true,
										sort : true
									},
									{
										field : 'houseName',
										title : '公寓名称',
										width : 100,
										edit : 'text'
									},
									{
										field : 'houseType',
										title : '房间类型',
										width : 100,
										edit : 'text',
									/* 	templet : function(res) {
											return '<em>' + res.houseType
													+ '</em>'
										} */
									}, {
										field : 'hsTiele',
										title : '标题',
										width : 150,
										edit : 'text',
										sort : true
									}, {
										field : 'hsPrice',
										title : '价格',
										width : 150
									}, 
									{
										field : 'hsRemain',
										title : '剩余房源',
										width : 150
									},{
										field : 'hsArea',
										title : '面积',
										width : 150
									}, {
										field : 'hsAddress',
										title : '地址',
										width : 150
									}, {
										field : 'hsCall',
										title : '房源电话',
										width : 150
									}, {
										field : 'hsWechat',
										title : '房源微信',
										width : 150
									}, {
										field : 'hsIntroduce',
										title : '房源介绍',
										width : 150
									}, {
										field : 'hsPic01',
										title : '图片一',
										width : 150
									}, {
										field : 'hsPic02',
										title : '图片二',
										width : 150
									},  {
										field : 'hsPic03',
										title : '图片三',
										width : 150
									}, {
										fixed : 'right',
										title : '操作',
										toolbar : '#barDemo',
										width : 150
									} ] ],
							page : true,
							id : 'testReload'
						});

						/*
						模糊查询操作
						 */
						var $ = layui.$, active = {
							reload : function() {
								var demoReload = $('#demoReload');

								//执行重载
								table.reload('testReload', {
									page : {
										curr : 1
									//重新从第 1 页开始
									},
									where : {
										"strLike" : demoReload.val()
									}
								}, 'data');
							}
						};

						$('.demoTable .layui-btn').on('click', function() {
							var type = $(this).data('type');
							active[type] ? active[type].call(this) : '';
						});

						//头工具栏事件
						table.on('toolbar(test)', function(obj) {
							var checkStatus = table.checkStatus(obj.config.id);
							switch (obj.event) {
							case 'getCheckData':
								var data = checkStatus.data;
								layer.alert(JSON.stringify(data));
								break;
							case 'getCheckLength':
								var data = checkStatus.data;
								layer.msg('选中了：' + data.length + ' 个');
								break;
							case 'isAll':
								layer.msg(checkStatus.isAll ? '全选' : '未全选');
								break;

							//自定义头工具栏右侧图标 - 提示
							case 'LAYTABLE_TIPS':
								layer.alert('这是工具栏右侧自定义的一个图标按钮');
								break;
							}
							;
						});
                        
						//监听提交
						 layui.form.on('submit(demo1)', function(data){
						   /*  layer.alert(JSON.stringify(data.field), {
						      title: '最终的提交信息'
						    })  */
						    console.log(data.field);
						    $.ajax({
						    	url : "hs.do?op=update",
						    	type : "post",
						    	contentType : "application/json",
						    	data : JSON.stringify(data.field),
						    	success:function(data){
						    		layer.msg(data == "true" ? "操作成功！" : "操作失败！", {
										icon : 1
									},function(){
												parent.layer.closeAll();
												location.reload();	
										});
						    	}
						    });
						    return false;
						  });
						
						//监听行工具事件
						table.on('tool(test)', function(obj) {
							var data = obj.data;
							/* console.log(obj) */
						 if (obj.event === 'edit') {
								$("#hsId").val(data.hsId)
								$("#houseName").val(data.houseName)
								$("#houseType").val(data.houseType)
								$("#hsTiele").val(data.hsTiele)
								$("#hsPrice").val(data.hsPrice)
								$("#hsRemain").val(data.hsRemain)
								$("#hsArea").val(data.hsArea)
								$("#hsAddress").val(data.hsAddress)
								$("#hsCall").val(data.hsCall)
								$("#hsWechat").val(data.hsWechat)
								$("#hsIntroduce").val(data.hsIntroduce)
								
								layer.open({
									type : 1,
									title : '编辑',
									content : $("#housingdiv"),
									area : [ '700px', '550px' ]
								})
								layui.form.render()
							}
						});
					});
				</script>

				<div class="layui-footer">
					<!-- 底部固定区域 -->
					© layui.com - 底部固定区域
				</div>

			</div>
		</div>
		<!-- 弹出层修改操作框 -->
		<div id="housingdiv" style="display: none;">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-block">
						<input type="text" id="hsId" name="hsId"
							lay-verify="title" autocomplete="off" class="layui-input"
							readonly="readonly">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">公寓名称</label>
					<div class="layui-input-block">
						<input type="text" id="houseName" name="houseName"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>

	            <div class="layui-form-item">
					<label class="layui-form-label">房间类型</label>
					<div class="layui-input-block">
						<input type="text" id="houseType" name="houseType"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" id="hsTiele"
							class="layui-textarea" name="hsTiele"></textarea>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">房间价格</label>
					<div class="layui-input-block">
						<input type="text" id="hsPrice" name="hsPrice"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>

                <div class="layui-form-item">
					<label class="layui-form-label">剩余房源</label>
					<div class="layui-input-block">
						<input type="text" id="hsRemain" name="hsRemain"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
                
                <div class="layui-form-item">
					<label class="layui-form-label">面积</label>
					<div class="layui-input-block">
						<input type="text" id="hsArea" name="hsArea"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
                
                <div class="layui-form-item">
					<label class="layui-form-label">地址</label>
					<div class="layui-input-block">
						<input type="text" id="hsAddress" name="hsAddress"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
                
                <div class="layui-form-item">
					<label class="layui-form-label">房源电话</label>
					<div class="layui-input-block">
						<input type="text" id="hsCall" name="hsCall"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
                
                <div class="layui-form-item">
					<label class="layui-form-label">房源微信</label>
					<div class="layui-input-block">
						<input type="text" id="hsWechat" name="hsWechat"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
                
                <div class="layui-form-item">
					<label class="layui-form-label">房源介绍</label>
					<div class="layui-input-block">
						<input type="text" id="hsIntroduce" name="hsIntroduce"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
                
                <div class="layui-upload">
					  <button type="button" class="layui-btn" id="btn1" name="hsPic01">上传图片01</button>
					  <div class="layui-upload-list">
					    <img class="layui-upload-img" id="demo1">
					    <p id="demoText"></p>
					  </div>
				</div>
				
				<div class="layui-upload">
					  <button type="button" class="layui-btn" id="btn2">上传图片02</button>
					  <div class="layui-upload-list">
					    <img class="layui-upload-img" id="demo2" name="hsPic02">
					    <p id="demoText"></p>
					  </div>
				</div>   
				
				<div class="layui-upload">
					  <button type="button" class="layui-btn" id="btn3" name="hsPic03">上传图片03</button>
					  <div class="layui-upload-list">
					    <img class="layui-upload-img" id="demo3">
					    <p id="demoText"></p>
					  </div>
				</div>


				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="demo1">确认修改</button>
					</div>
				</div>
			</form>
		</div>
		
		
		
		<script>
	layui.use(['upload','jquery'], function(){
		  var upload = layui.upload;
		  var $ = layui.jquery;
		  
		   
		  //执行实例
		  var uploadInst = upload.render({
		    elem: '#btn1' //绑定元素
		    ,url: 'uis1.do' //上传接口
		    ,accept: 'file'
		    ,done: function(res){
		      //上传完毕回调
		      layui.use('layer', function(){
		              var layer = layui.layer;

		                layer.msg(res.url, {
		                       time: 2000, //6s后自动关闭
		                       icon:1
		                 },function(){
		                	 console.log("res :"+res.code);
//		                 	 $(".layui-nav-img").attr("src","/YLMS/imgs/"+res.code)
		                	 
		                 });
		            });
		      console.log(res.code);
		    },before: function(obj){
			       //预读本地文件示例，不支持ie8
			       obj.preview(function(index, file, result){
			         $('#demo1').attr('src', result); //图片链接（base64）
			       });
			     }
		    ,error: function(msg){
		      //请求异常回调
		      console.log(msg);
		    }
		  });
		});
	
	
	//2
layui.use(['upload','jquery'], function(){
  var upload = layui.upload;
  var $ = layui.jquery;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#btn2' //绑定元素
    ,url: 'uis2.do' //上传接口
    ,accept: 'file'
    ,done: function(res){
      //上传完毕回调
      layui.use('layer', function(){
              var layer = layui.layer;

                layer.msg(res.url, {
                       time: 2000, //6s后自动关闭
                       icon:1
                 },function(){
                	 console.log("res :"+res.code);
//                 	 $(".layui-nav-img").attr("src","/YLMS/imgs/"+res.code)
                	 
                 });
            });
      console.log(res.code);
    },before: function(obj){
	       //预读本地文件示例，不支持ie8
	       obj.preview(function(index, file, result){
	         $('#demo2').attr('src', result); //图片链接（base64）
	       });
	     }
    ,error: function(msg){
      //请求异常回调
      console.log(msg);
    }
  });
});
	
	//3
	layui.use(['upload','jquery'], function(){
  var upload = layui.upload;
  var $ = layui.jquery;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#btn3' //绑定元素
    ,url: 'uis3.do' //上传接口
    ,accept: 'file'
    ,done: function(res){
      //上传完毕回调
      layui.use('layer', function(){
              var layer = layui.layer;

                layer.msg(res.url, {
                       time: 2000, //6s后自动关闭
                       icon:1
                 },function(){
                	 console.log("res :"+res.code);
//                 	 $(".layui-nav-img").attr("src","/YLMS/imgs/"+res.code)
                	 
                 });
            });
      console.log(res.code);
    },before: function(obj){
	       //预读本地文件示例，不支持ie8
	       obj.preview(function(index, file, result){
	         $('#demo3').attr('src', result); //图片链接（base64）
	       });
	     }
    ,error: function(msg){
      //请求异常回调
      console.log(msg);
    }
  });
});
</script>
		
		
		
		<script>
		
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;

			});
		</script>
</body>
</html>